<template>
  <div class="item" style="height: 100%; width: 100%" ref="container">
    <div id="Pie" :style="{ width: width+'px', height: height-40+'px' }"></div>
  </div>
</template>

<script>
import request from "@/utils/request.js";
import * as echarts from "echarts";

export default {
  props:{
    width:Number,
    height:Number
  },
  name: "Pie",
  data() {
    return {
      chartInstance: null,
      echart: echarts,
      option: [],
      count: [],
      legendFontSize: 10, // 初始图例文字大小
      resizeTimer: null // 定时器
    };
  },
  mounted() {
    this.initChart();
    this.getCount();
    window.addEventListener("resize", this.handleResizeEnd);
  },
  beforeUnmount() {
    window.removeEventListener("resize", this.handleResizeEnd);
  },
  methods: {
    getCount() {
      let level = JSON.parse(localStorage.getItem("user")).level
      let organizationId = JSON.parse(localStorage.getItem("user")).organization
      let isAllClient = JSON.parse(localStorage.getItem("user")).isAllClient;
      let clientIds;
      if (isAllClient === "1") {
        clientIds = JSON.parse(localStorage.getItem("user")).clientIds;
      } else {
        clientIds = [];
      }
      request.get("/equipment-input-store/findCountByClient?organizationId="+organizationId+"&level="+level+"&isAllClient="+isAllClient+"&clientIds="+clientIds).then((res) => {
        this.count = res.data
        this.getData();
      });
    },
    initChart() {
      this.chartInstance = this.echart.init(document.getElementById("Pie"));
    },
    async getData() {
      // await this.updateData();
      this.handleResizeEnd()
    },
    updateData() {
      this.option = {
        title: {
          text: "单位设备统计",
          left: "center",
          textStyle: {
            color: 'white'
          },
        },
        legend: {
          orient: "vertical",
          left: "left",
          textStyle: {
            fontSize: this.legendFontSize, // 设置图例文字大小
            color: 'white'
          },
        },
        series: [
          {
            name: "联网单位",
            type: "pie",
            data: this.count,
            label: {
              show: false,
              position: 'outside', // 将标签显示在饼图外部
              formatter: '{b}\n{c} ({d}%)', // 自定义标签格式
              color: '#fff', // 标签文字颜色
              fontSize: 15 // 标签文字大小
            },
            labelLine: {
              show: true,
              length: 10, // 第一个折线的长度
              length2: 10, // 第二个折线的长度
              lineStyle: {
                color: '#fff', // 线条颜色
                width: 1 // 线条宽度
              }
            },
            emphasis: {
              label: {
                show: true, // 悬浮时显示标签
                fontWeight: 'bold'
              },
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
          },
        ],
      };
      this.chartInstance.setOption(this.option, true);
    },
    handleResizeEnd() {
      clearTimeout(this.resizeTimer);
      this.resizeTimer = setTimeout(() => {
        this.chartInstance.resize();
        this.updateData(); // 重新渲染 echarts 图表
      }, 1000); // 设置延迟时间，500ms
    },
  },
};
</script>

<style scoped>
</style>
